<style>
	.page{
		padding-bottom: 100upx;
	}
	.m-no-address{
		padding-left: 40upx;
		font-size: 30upx;
	}
	.m-address-info{
		width: 100%;
		position: relative;
		padding: 40upx 0;
		background: #ffffff;
	}
	.m-address-info-l{
		width: 600upx;
		margin-left: 40upx;
	}
	.m-address-info-r{
		position: absolute;
		right: 20upx;
		top: 50%;
		transform: translateY(-50%);
	}
	.m-address-info-t{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 40upx;
		margin-bottom: 18upx;
		font-size: 34upx;
	}
	.u-address-content{
		font-size: 30upx;
		color: #5f5f5f;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.m-address-bg{
		width: 100%;
		height: 14upx;
		background: url() repeat-x;
	}
	.g-order-goods{
		background: #f2f2f2;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.m-goods-box{
		height: 329upx;
		width: 100%;
		background: #fff;
		margin-top: 19upx;
	}
	.m-goods{
		width: 700upx;
		margin: 0 auto;
		height: 100%;
		overflow: hidden;
	}
	.m-goods image{
		float: left;
		width: 257upx;
		height: 257upx;
	}
	.m-goods-info{
		margin-top: 25upx;
	}
	.m-goods-detail{
		float: right;
		height: 257upx;
		width: 415upx;
		margin-top: 15upx;
	}
	.m-goods-name{
		font-size: 30upx;
		height: 80upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.m-goods-attr{
		height: 48upx;
		font-size: 24upx;
		margin-top: 32upx;
	}
	.u-attr-title{
		color: #5f5f5f;
		float: left;
	}
	.u-attr-data{
		color: #939393;
		width: 320upx;
		float: left;
		text-overflow:ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.m-goods-number{
		height: 42upx;
		width: 100%;
		margin-top: 18upx;
	}
	.u-goods-buynum-box{
		width: 50%;
		float: left;
		font-size: 24upx;
		margin-top: 8upx;
	}
	.u-goods-buynum-title{
		color: #5f5f5f;
		float: left;
	}
	.u-goods-buynum{
		color: #8d8d8d;
	}
	.m-goods-buynum-edit-box{
		height: 40upx;
		width: 50%;
		float: left;
		position: relative;
		top: 8upx;
	}
	.u-goods-buynum-minus{
		border-top-left-radius: 5upx;
		border-bottom-left-radius: 5upx;
		background: #d2d2d2;
	}
	.u-goods-buynum-minus,.u-goods-buynum-add{
		float: left;
		width: 59upx;
		height: 40upx;
		text-align: center;
		line-height: 35upx;
		color: #3e3e3e;
	}
	.u-goods-buynum-edit{
		width: 88upx;
		text-align: center;
		float: left;
		height: 40upx;
	}
	.u-goods-buynum-edit input{
		height: 35upx;
		border: none;
		font-size: 30upx;
		line-height: 30upx;
		position: relative;
		top: -3upx;
	}
	.u-goods-buynum-add{
		background: #d71311;
		border-top-right-radius: 5upx;
		border-bottom-right-radius: 5upx;
		color: #fff;
	}
	.u-price-total{
		color: #d71311;
		font-size: 34upx;
		margin-top: 30upx;
		text-align: right;
	}
	.g-pay-info-box{
		margin-top: 20upx;
		background: #fff;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.m-pay-info-box{
		width: 698upx;
		margin: 0 auto;
		height: 100%;
	}
	.u-pay-title{
		font-size: 34upx;
		margin-top: 35upx;
	}
	.m-pay-type-box{
		width: 680upx;
		margin-left: 15upx;
	}
	.m-pay-type-box{
		margin-top: 32upx;
	}
	.m-pay-type{
		width: 682upx;
		margin: 0 auto;
		height: 75upx;
		margin-left: 21upx;
	}
	.m-pay-type-title{
		width: 80%;
		height: 100%;
		margin-bottom: 48upx;
		float: left;
	}
	.m-pay-type-title image{
		width: 75upx;
		height: 75upx;
		float: left;
	}
	.u-type-title{
		float: left;
		margin-left: 32upx;
		height: 75upx;
		line-height: 75upx;
	}
	.u-pay-icon{
		float: right;
		width: 10%;
		margin-top: 20upx;
	}
	.u-pay-icon image{
		width: 42upx;
		height: 42upx;
	}
	.g-pay{
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		border-top: 2upx solid #e5e5e5;
		position: fixed;
		bottom: 0px;
		background: #fff;
	}
	.m-pay-price,.u-go-pay{
		width: 50%;
		float: left;
		text-align: center;
	}
	.u-go-pay{
		background: #d71311;
		color: #fff;
		font-size: 40upx;
	}
	.buyed{
		background: #999999;
	}
	.m-pay-price view{
		color: #d71311;
	}
	.u-pay-price-text{
		font-size: 30upx;
		display: inline-block;
	}
	.u-price{
		display: inline-block;
		font-size: 40upx;
	}
	.m-full-loading{
		background: rgba(255,255,255,0);
	}
</style>
<template>
    <view class="page">
        
        <view class="g-order-goods">
            <view class="m-goods-box">
                <view class="m-goods">
                    <view class="m-goods-info">
                        <image :src="thumb" mode=""></image>
                        <view class="m-goods-detail">
                            <view class="m-goods-name">{{data.goods_name}}</view>
                            <view class="m-goods-number">
                                <view class="u-goods-buynum-box">
                                    <view class="u-goods-buynum-title">数量：</view>
                                    <view class="u-goods-buynum">{{number}}</view>
                                </view>
                                <view class="m-goods-buynum-edit-box">
                                    
                                    <view class="u-goods-buynum-edit">
										<input type="number" v-model="number" disabled />
									</view>
                                    
                                </view>
                            </view>
                            <view class="u-price-total">金额：{{totalPrice}}</view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="g-pay-info-box">
                <view class="m-pay-info-box">
                    <view class="u-pay-title">支付方式：</view>
                </view>
                <view class="m-pay-type-box" @tap="togglePay" v-for="(item,index) in payList" :data-type="item.type"
                    :key="index">
                    <view class="m-pay-type">
                        <view class="m-pay-type-title">
                            <image :src="item.icon_text" mode=""></image>
                            <view class="u-type-title">{{item.name}}</view>
                        </view>
                        <view class="u-pay-icon">
                            <image :src="type == item.type ? '../../static/icons/pay-select-act.png' : '../../static/icons/pay-select.png'"
                                mode=""></image>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="g-pay">
            <view class="m-pay-price">
                <view class="u-pay-price-text">实付：¥</view>
                <view class="u-price">{{totalPrice}}</view>
            </view>
            <view class="u-go-pay" :class="[!isBuy?'':'buyed']" @tap="buy">
                确认支付
            </view>
        </view>
        
        <view class="m-full-loading" v-if="isShowLoading">
            <view class="m-loading">
                <image src="../../static/images/loading.gif" mode="widthFix"></image>
                <text>加载中</text>
            </view>
        </view>
    </view>
</template>
<script> 
	import henglang from '../../common/common.js';
    export default {
        data() {
            return {
                number: '', // 购买数量
                team_id:'',
                nPrice: '',
				totalPrice:'',
                type: '', // 支付类型
                nMaxNum: 20, // 最大购买份数
                data: {}, // 商品数据
                payList: [], // 支付列表
                thumb: '',
                isShowLoading: false,
				isAddress: false,
				isBuy: false
            };
        },
		computed: {
			/* totalPrice() { 
				return (this.data.shop_price * this.number).toFixed(2);
			} */
		},
        methods: {
            togglePay(e) {
                this.type = e.currentTarget.dataset.type;
            },
            buy() {
				if(!this.isBuy){
					let that = this;
					that.isBuy = true
					this.isShowLoading = true;
					if(!uni.getStorageSync('isGoodType')){
						that.isShowLoading = false;
						henglang.showToast('支付成功！请等待客服发货',500)
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/jewel/index/index'
							})
						},500)
					}else{
						henglang.post('payment/pay_discount_order',{team_id: that.team_id,type: that.type},true,function(res){
							that.isShowLoading = false;
							if (res.data.code <= -1) {
								that.isBuy = false
							    return henglang.showToast(res.data.msg,5000);
							}
							switch (that.type) {
							    case 'wxpay':
								case 'alipay':
							        uni.requestPayment({
							            provider: that.type,
							            orderInfo: res.data.data.pay_order, //微信、支付宝订单数据,
							            success: (res) => {
							                henglang.showToast('支付成功',500);
							                uni.redirectTo({
							                	url:'/pages/order/pay_after?team_id='+that.team_id
							                })
							            },
							            fail: (res) => {
							                henglang.showToast('支付失败');
											that.isBuy = false
							            }
							        })
							        break;
							    case 'granary':	
							        if (res.data.code >= 0) {
										henglang.showToast(res.data.msg,500);
							            setTimeout(() => {
							                uni.redirectTo({
							                    url: '/pages/order/pay_after?team_id='+that.team_id
							                })
							            }, 500)
							        }
							        break;
							}
						});
					}
				}
            }
        },
        onReady() {
            let that = this;
			henglang.post('payment/payList',{},true,function(res){
				that.payList = res.data.data;
				that.type = that.payList[0].type;
			});
			
			
        },
        onLoad({
            team_id,
        }) {
            let that = this;
            this.team_id = team_id;
			 // 请求地址和商品数据   
			henglang.get('Order/discount_order',{team_id: team_id},true,function(res){
				if(res.data.code<0)
					return henglang.showToast(res.data.msg)
				that.data = res.data.data[0];
				that.data.goods_name=that.data.goods_names
				that.number=that.data.number
				that.totalPrice=that.data.totalPrice
				that.thumb=that.data.thumb
			});
        }
    }
</script>
